<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形菜单</title>
    <style type="text/css">
        body{font-size: 14px;line-height: 20px}
        a{text-decoration: none;color: cyan}
        a:hover{color: red}
        img{border: 0px;vertical-align: middle}
        .treeStyle{list-style: none;display: none}
    </style>
    <script>
        function show(bookType) {
            if(document.getElementById(bookType).style.display=='block'){
                document.getElementById(bookType).style.display='none'
            }else{
                document.getElementById(bookType).style.display='block'
            }
        }
    </script>
</head>
<body>
      <b><img src="#">图书分类</b>
      <p><a href="javascript:show('l&a')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="#">文艺</a></p>
      <ul id="l&a" class="treeStyle">
          <li><img src="#">文学</li>
          <li><img src="#">传记</li>
          <li><img src="#">艺术</li>
          <li><img src="#">摄影</li>
      </ul>
      <p><a href="javascript:show('succ')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="#">励志/成功</a></p>
      <ul id="succ" class="treeStyle">
          <li><img src="#">职场</li>
          <li><img src="#">成功</li>
          <li><img src="#">人际</li>
          <li><img src="#">心灵修养</li>
      </ul>
</body>
</html>